<template>
  <Wrapper>
    <el-card shadow="never">
      <select-filter
        :data="data"
        :select-values="selectValues"
        @change="handleFilterChange"
      />
      <div></div>
    </el-card>
    <el-card
      shadow="never"
      class="card-box"
    >
      {{ selectValues }}
    </el-card>
    <el-card
      shadow="never"
      class="card-box"
    >
      <el-descriptions
        title="配置项"
        border
        :column="1"
        class="descriptions"
      >
        <el-descriptions-item label="data {object}">需要筛选的数据列表，详情请查看代码</el-descriptions-item>
        <el-descriptions-item label="selectValues {array}">默认选中的值</el-descriptions-item>
        <el-descriptions-item label="activeColor {string}">选中时的文字颜色</el-descriptions-item>
        <el-descriptions-item label="activeBgColor {string}">选中时的背景颜色</el-descriptions-item>
        <el-descriptions-item label="radius {string| number}">圆角，最大值32，最小值4</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </Wrapper>
</template>

<script setup>
import SelectFilter from '@/components/select-filter'

const selectValues = ref({ state: '', type: ['1', '3'] })
const data = [
  {
    title: "物流状态(单)",
    key: "state",
    options: [
      {
        label: "全部",
        value: "",
      },
      {
        label: "已下单",
        value: "1",
        icon: "ShoppingCart",
      },
      {
        label: "已发货",
        value: "2",
        icon: "Van",
      },
      {
        label: "已签收",
        value: "3",
      },
      {
        label: "已退回",
        value: "4",
        icon: "Guide",
      },
      {
        label: "已完成",
        value: "5",
      },
    ],
  },
  {
    title: "商品类型(多)",
    key: "type",
    multiple: true,
    options: [
      {
        label: "全部",
        value: "",
      },
      {
        label: "食品类",
        value: "1",
      },
      {
        label: "服装类",
        value: "2",
      },
      {
        label: "家具类",
        value: "3",
      },
      {
        label: "日用品类",
        value: "4",
      },
    ],
  },
]

function handleFilterChange(value) {
  selectValues.value = value
}

</script>

<style scoped lang="scss">
@import '@/assets/styles/mixins.scss';

.descriptions {
  @include responsive-style('large-screen', 'desktop') {
    width: 50% !important;
  }

  @include responsive-style('phone') {
    width: 100% !important;
  }
}
</style>
